<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="jquery-3.1.0.js"></script>
		<title>小米商城003</title>
		
		<style type="text/css">
			body,ul,li{
				margin: 0;
				padding: 0;
			}
			header{
				height: 40px;
				width: 100%;
				background-color: #333333;
				/*margin-left: 3px;*/
				
			}
			/*公共样式*/
			.juzhong{
				width: 1230px;
				margin: 0 auto;
			}
			.zuo a{
				text-decoration: none;
				/*text-align: center;*/
				line-height: 40px;
				font-size: 13px;
				color: #B0B0B0;
				border-right: 1px solid #424242;
				padding-right: 10px;
			}
			.zuo a:hover{
				color: white;
				
			}
			.you a{
				text-decoration: none;
				/*text-align: center;*/
				line-height: 40px;
				font-size: 13px;
				color: #B0B0B0;
				border-right: 1px solid #424242;
				padding-right: 10px;
			}
			.you a:hover{
				color: white;
			}
			.zuo{
				/*margin-left: 45px;*/
				float: left;
			}
			.you{
				/*margin-right: 45px;*/
				float: right;
			}
			
			/*轮播图上mian*/
			.logo{
				display: inline-block;
				/*padding-left: 35px;*/
				float: left;
			}
			ul{
				list-style: none;
				text-align: center;
				
			}
			.zhongzuo{
				width: 100%;
				margin: 0 auto;
				height: 100px;
				/*background-color: #eee;*/
				line-height: 45px;
				text-decoration: none;
				text-align: center;
				float: left;
				display: inline;
				/*margin-left: 15px;*/
			}
			/*.zhongzuo nav{
				width: 100%;
				margin: 0 auto;
				
			}*/
			/*.zhongzuo a{
				text-decoration: none;
				font-size: 16px;
				color: #333333;
				line-height: 45px;
				text-align: center;
				margin-top: 20px;
			}*/
			/*.zhongzuo .dropdown{
				width: 1230px;
				margin: 0 auto;
				
			}*/
			.zhongzuo .dropdown_menu{
				float: left;
				width: 100px;
				height: 20px;
				/*line-height: 100px;*/
				padding: 10px 10px;
				margin: 0 auto;
			}
			.zhongzuo .dropdown_menu a{
				
				/*height: 20px;*/
				display: block;
				text-decoration: none;
				color: #333333;
			}
			.zhongzuo .dropdown_menu a:hover{
				text-decoration: none;
				color: #f90;
			}
			.zhongzuo .dropdown_menu .dropdown_content{
				/*width: 230px;
				height: 230px;*/
				padding-top: 40px;
				float: left;
				display: inline;
				/*color: #aaa;*/
				display: none;
				
				
			}
			.zhongzuo .dropdown_menu .dropdown_content li:hover{
				text-decoration: none;
				cursor: pointer;
			}
			
			
			
			/*搜索框*/
			/*.zhongyou{
				float: left;
				margin-top: 20px;
				margin-left: 20px;
				height: 45px;
			}*/
			
			
			/*轮播图*/
			/*设置图片大小 绝对定位*/
			.lunbo{
				height: 456px;
				width: 1226px;
				margin-top: 100px;
				position: relative;
				
			}
			/*设置图片属性*/
			.lunbo .pic a{
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			
			.lunbo .pic a.current{
				display: block;
			}
			
			/*设置原点 数字*/
			.lunbo .indicator{
				position: absolute;
				right: 40px;
				bottom: 30px;
			}
			/*设置数字属性*/
			.lunbo .indicator span{
				display: inline-block;
				width: 10px;
				height: 10px;
				/*设置圆角*/
				border-radius: 50%;
				background-color: #818080;
				color: white;
				text-align: center;
				line-height: 20px;
				cursor: pointer;
				box-sizing: border-box;
			}
			.lunbo .indicator span.active{
				background-color: #CCE6F3;
				border: 2px solid #7A8991;
			}
			/*设置 左右键*/
			.lunbo .page{
				position: absolute;
				right: 20px;
				bottom: 225px;
				color: white;
			}
			/*设置左右键 属性*/
			.lunbo .page span{
				display: inline-block;
				width: 45px;
				height: 70px;
				background-color: rgba(100,100,100,0.6);
				text-align: center;
				line-height: 70px;
				cursor: pointer;
				/*禁止用户选择页面上的内容*/
				-webkit-user-select: none;
				-moz-user-select: none;
			}
			.lunbo .page span:hover{
				background-color: rgba(100,100,100,0.8);
			}
		</style>
	</head>
	<body>
		
		<!--头部标签栏-->
		<header>
			<div class="juzhong">
			<span class="zuo">
				<a href="//www.mi.com/index.html">小米商城</a>
				<a href="http://www.miui.com/">MIUI</a>
				<a href="http://www.miliao.com/">米聊</a>
				<a href="http://game.xiaomi.com/">游戏</a>
				<a href="http://www.duokan.com/">多看阅读</a>
				<a href="https://i.mi.com/">云服务</a>
				<a href="https://jr.mi.com?from=micom">金融</a>
				<a href="//www.mi.com/c/appdownload/">小米商城移动版</a>
				<a href="//static.mi.com/feedback/">问题反馈</a>
				<a href="#J_modal-globalSites">Select Region</a>
			</span>
			<span class="you">
				<a href="">登录</a>
				<a href="">注册</a>
				<a href="">消息通知</a>
				<a href="">购物车(0)</a>
			</span>
			</div>
		</header>
		
		<!--内容-->
		
		<div class="zhongzuo">
			<nav class="juzhong">
			<div class="logo">
				<a href=""><img src="背景图片/logo.png" /></a>
			</div>
			<!--下拉-->
			<ul class="dropdown">
				<!--下拉菜单-->
				<li class="dropdown_menu">
					<a href="">小米手机</a>
					<!--下拉内容-->
					<ul class="dropdown_content">
						<li>
							<a href=""><img src="产品图片/xmNOTE2-80.jpg"/>小米Note 2x</a>
						</li>
						<li>
							<a href=""><img src="产品图片/MIX-80.jpg"/>小米MIX</a>
						</li>
						<li>
							<a href=""><img src="产品图片/xm5S-80.jpg"/>小米5s</a>
						</li>
						<li>
							<a href=""><img src="产品图片/xm5S-plus-80.jpg"/>小米5s Plus</a>
						</li>
						<li>
							<a href=""><img src="产品图片/xm5-80.jpg"/>小米手机5</a>
						</li>
						<li>
							<a href=""><img src="产品图片/xmmax-80.jpg"/>小米Max</a>
						</li>
					</ul>
				</li>
				
				
				<li class="dropdown_menu">
					<a href="">红米</a>
					<!--下拉内容-->
					<ul class="dropdown_content">
						<li>
							<a href=""><img src="产品图片/hmnote4-80.jpg"/>红米Note 4</a>
						</li>
						<li>
							<a href=""><img src="产品图片/hm4-80.jpg"/>红米4</a>
						</li>
						<li>
							<a href=""><img src="产品图片/hm4A-80.jpg"/>红米4A</a>
						</li>
						
					</ul>
				</li>
				
				
				<li class="dropdown_menu">
					<a href="">平板·笔记本</a>
					<!--下拉内容-->
					<ul class="dropdown_content">
						<li>
							<a href=""><img src="图片/mipad2-16!160x110.jpg"/>小米平板2 16GB</a>
						</li>
						<li>
							<a href=""><img src="图片/mipad2-64!160x110.jpg"/>小米平板2 64GB</a>
						</li>
						<li>
							<a href=""><img src="图片/mipad2-64-win!160x110.jpg"/>小米平板2  64GB Windows版</a>
						</li>
						<li>
							<a href=""><img src="图片/bijiben32012.5!160x110.jpg"/>小米笔记本Air 12.5"</a>
						</li>
						<li>
							<a href=""><img src="图片/bijiben320!160x110.jpg"/>小米笔记本Air 13.3"</a>
						</li>
					</ul>
				</li>
				
				
				
				
					<li class="dropdown_menu">
						<a href="">电视</a>
						<ul class="dropdown_content">
						<li>
							<a href=""><img src="图片/mipad2-16!160x110.jpg"/>小米电视3s 48英寸</a>
						</li>
						<li>
							<a href=""><img src="图片/mipad2-64!160x110.jpg"/>小米电视3s 55英寸</a>
						</li>
						<li>
							<a href=""><img src="图片/mipad2-64-win!160x110.jpg"/>小米电视3s 60英寸</a>
						</li>
						<li>
							<a href=""><img src="图片/bijiben32012.5!160x110.jpg"/>小米电视3s 65英寸</a>
						</li>
						<li>
							<a href=""><img src="图片/bijiben320!160x110.jpg"/>小米电视3 70英寸</a>
						</li>
						<li>
							<a href=""><img src="图片/bijiben320!160x110.jpg"/>查看全部<br/>小米电视</a>
						</li>
						</ul>
					</li>
					<li class="dropdown_menu">
						<a href="">盒子·影音</a>
						<ul class="dropdown_content">
							<li></li>
						</ul>
					</li>
					<li class="dropdown_menu">
						<a href="">路由器</a>
						<ul class="dropdown_content">
							<li></li>
						</ul>
					</li>
					<li class="dropdown_menu">
						<a href="">智能硬件</a>
						<ul class="dropdown_content">
							<li></li>
						</ul>
					</li>
					<li class="dropdown_menu">
						<a href="">服务</a>
						<ul class="dropdown_content">
							
						</ul>
					</li>
					<li class="dropdown_menu">
						<a href="">社区</a>
						<ul class="dropdown_content">
							
						</ul>
					</li>
				
				
				<input type="" name="" id="" value="" placeholder="小米MAX"/>
				<button>搜索</button>
			</ul>
			</nav>
		</div>
		
		<!--搜索框-->
		<!--<div class="zhongyou">
			<form action="">
				<label for=""></label>
				<input type="" name="" id="" value="" />
				<button>搜索</button>
			</form>
		</div>-->
		
		
		<!--轮播图-->
		
		<div class="lunbo" data-stat-title="焦点轮播图">
			<div class="pic">
				<a class="current" href="#"><img src="图片/lunbo1.jpg"/></a>
				<a href=""><img src="图片/lunbo2.jpg"/></a>
				<a href=""><img src="图片/lunbo3.jpg"/></a>
				<a href=""><img src="图片/lunbo4.jpg"/></a>
				<a href=""><img src="图片/lunbo5.jpg"/></a>
			</div>
			<div class="indicator">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="page">
				<span class="prev">&lt</span>
				<span class="next">&gt</span>
			</div>
			
		</div>
		
		
		
		<!--底部-->
		<footer>
			
		</footer>
		
	</body>
</html>


<!--设置  轮播图 切换-->
<script type="text/javascript">
	
	$(function () {
		
		var index = 0;
		
		var timer = setInterval(nextImg,3000);
		
		function nextImg () {
			index = index==$('.lunbo .pic a').length-1 ? 0 : index+1;
			showImg();
		}
		function prevImg () {
			index = index==0 ? $('.lunbo .pic a').length-1 : index-1;
			showImg();
		}
		
		function showImg (){
			$('.lunbo .pic a')
			.eq(index).show()
			.siblings().hide();
			$('.lunbo .indicator span')
			.eq(index).addClass('active')
			.siblings().removeClass('active');
		}
		
		//手动切换
		$('.lunbo .indicator span').hover(function(){
			clearInterval(timer);
			
			index = $(this).index();
			showImg();
		},function(){
			timer = setInterval(nextImg,1000);
		});
		
		//点击切换上下
		$('.lunbo .page span').hover(function(){
			clearInterval(timer);
		},function(){
			timer = setInterval(nextImg,1000);
		});
		
		//上一张
		$('.lunbo .page .prev').click(function(){
			prevImg();
		});
		
		//下一张
		$('.lunbo .page .next').click(function(){
			nextImg();
		});
		
	});
	
	
//	下拉菜单
		
		$('.zhongzuo .dropdown_menu').each(function(){
			//鼠标进来显示 下拉
			$(this).mouseenter(function(){
				$('.zhongzuo .dropdown_content')
				.css('display','none')
				.eq($(this).index())
				.css('display','block');
			});
			//鼠标出去，全部隐藏
			$(this).mouseleave(function(){
				$('.zhongzuo .dropdown_content')
				.css('display','none');
			})
		});

	
</script>
